<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>老师</title>
    <link href="../../css/mui.css" rel="stylesheet" type="text/css">
    <link href="../../css/style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../../src/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../src/style.css">
    <style>
        #teacher {
            /* padding-top: 0.38rem; */
        }
        
        .teacherHead {
           
            width: 100%;
        }
        
        .teacherHead img {
            width: 100%;
            /* border-radius: 20px; */
            display: block;
        }
        
        .teacherList {
            width: 6.9rem;
            margin: 0 auto;
        }
        
        .teacherList ul li {
            border-bottom: solid 1px #ccc;
            margin-bottom: 0.2rem;
            padding-bottom: 0.2rem;
        }
        
        .teacherList ul li img {
            width: 100%;
        }
        
        .teacherContent {
            padding-top: 0.2rem;
            width: 4.2rem;
            margin-left: 0.2rem;
            margin-top: 0.2rem;
        }
        
        .teacherContent .title {
            font-size: 16px;
            color: #282828;
            padding-bottom: 0.1rem;
        }
        
        .teacherContent .name {
            font-size: 12px;
            color: #9b9b9b;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            width: 4.3rem;
            text-overflow: ellipsis;
            overflow: hidden;
            line-height: 20px;
            margin-bottom: 0.1rem;
        }
        
        .serviceImg {
            width: 2rem;
            height: 3rem;
            margin-right: 0.2rem;
            text-align: center;
            padding-top: 0.2rem;
            padding-left: 0.2rem;
        }
        
        .serviceImg img {
            height: 100%;
        }
        
        .serviceCount {
            font-size: 12px;
            color: #9b9b9b;
            position: absolute;
            left: 0.7rem;
            bottom: 0.2rem
        }
        
        .servicesbtn {
            border: solid 1px #25aae3;
            display: inline-block;
            font-size: 14px;
            color: #25aae3;
            text-align: center;
            width: 2rem;
            margin: 0.2rem 0;
            position: absolute;
            top: 0.2rem;
            right: 0.2rem;
        }
        
        .servicesbtn .newgif img {
            width: 25px;
            margin-left: 5px;
        }
        
        .teacherList li {
            border: solid 1px #dbdbdb;
            border-radius: 10px;
            position: relative;
            background: #fff;
        }
        
        .teachera {
            font-size: 12px;
        }
        
        .IndOneE {
            margin-top: 0.2rem;
        }
        
        .IndOneE span {
            margin-bottom: 0.2rem;
        }
        
        .xiaohuo {
            width: 0.2rem!important;
        }
        
        .special {
            position: absolute;
            left: -0.2rem;
            width: 2rem!important;
            top: -0.1rem
        }
    </style>
</head>

<body>
    <div id="teacher">
        <div class="teacherHead">
            <a href="javascript:;"><img v-for="(banner,index) in banner" :src="banner.banner_pic" v-if="index=1"></a>
        </div>
        <div class="newTeacherList">
            <ul>
                <li v-for="item in items" @tap="openchatbox(item)">
                    <div class="imgInfo" style="position: absolute;">  
                        <img :src="item.pic" alt="">
                    </div>
                    <div class="textInfo">
                        <span class="name">{{item.name}} <span v-if="item.guest==1" class="iconfont teacherType icon-upstagefill"></span></span>
                        <span class="type"><span v-if="item.guest==1">特约 | </span>{{item.work}}</span>
                        <span class="info">{{item.content}}</span>

                        <div class="Grade">
                            <span class="iconfont icon-favorfill" v-for="(iteming,index) in Number(item.score)"></span>
                            <!-- <span class="iconfont icon-favorfill" v-for="(iteming,index) in 5-Number(item.score)"></span> -->
                            <span>{{item.score}}.0</span>
                        </div>
                        <div class="tabs">
                            <span>辅导</span>
                            <span>生活技巧</span>
                            <span>学习方法</span>
                        </div>
                        <a class="newBtns" href="#">立即咨询</a>
                    </div>
                </li>
            </ul>
        </div>
       
    </div>
    <script src="../../js/jquery-1.8.3.min.js"></script>
    <script src="../../js/mui.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/app.js"></script>
    <script>
        //mui初始化，配置下拉刷新
        mui.init();
        //处理返回键
        var backButtonPress = 0;
        mui.back = function(event) {
            var ws = plus.webview.currentWebview()
            mishuWebview = plus.webview.getWebviewById('kefu');
            tuwendetailWebview = plus.webview.getWebviewById('tuwendetail');
            momentsbannerdetailWebview = plus.webview.getWebviewById('momentsbannerdetail');
            if (mishuWebview) {
                mishuWebview.close();
            } else if (tuwendetailWebview) {
                tuwendetailWebview.close();
            } else if (momentsbannerdetailWebview) {
                momentsbannerdetailWebview.close();
            } else {
                backButtonPress++;
                if (backButtonPress > 1) {
                    plus.runtime.quit();
                } else {
                    plus.nativeUI.toast('再按一次退出应用');
                }
                setTimeout(function() {
                    backButtonPress = 0;
                }, 1000);
                return false;
            }
        };
        var page = 1
        mui.plusReady(function() { 
            var state = app.getState();
            var uid = state.userid;
            memberToken = state.memberToken
                //请求老师信息
            mui.post(Apiurl+'index/seclist', {
                uid: uid,
                memberToken: memberToken
            }, function(data) {
                teacher.items = data;
                //console.log(JSON.stringify(data));
            }, 'json');
			mui.post(Apiurl+'index/banner', { 
                uid: uid, 
                memberToken: memberToken,
                type:8
            }, function(data) {
                teacher.banner = data;
                console.log(JSON.stringify(data));
            }, 'json');

        });
        var teacher = new Vue({
            el: '#teacher',
            data: {
                items: [], //列表信息流数据
                banner:''
            },
            methods: {
                openchatbox: function(item) {
                    mui.openWindowWithTitle({
                        url: 'http://kefu.weidu168.com/mobile?pic=' + item.pic + '&record=&visiter=' + item.username + '&channel=vmt52b&domain=' + item.username,
                        id: 'kefu',
                        preload: true,
                        show: {
                            aniShow: 'pop-in',
                            autoShow: true
                        },
                        styles: {
                            "render": "always",
                            "popGesture": "hide",
                            "bounce": "vertical",
                            "bounceBackground": "#efeff4",
                            "titleNView": { //详情页原生导航配置
                                backgroundColor: '#fff', //导航栏背景色
                                titleText: item.name, //导航栏标题
                                titleColor: '#000', //文字颜色
                                autoBackButton: true, //自动绘制返回箭头
                                splitLine: { //底部分割线
                                    color: '#dfdfdf'
                                }
                            }
                        },
                        waiting: {
                            autoShow: true
                        }
                    });

                }
            }
        });
        
     
        document.getElementById("feedback").addEventListener('tap', function() {
            mui.openWindowWithTitle({
                url: 'http://kefu.weidu168.com/mobile?pic=' + item.pic + '&record=&visiter=' + item.username + '&channel=&domain=benxinkeji',
                id: 'kefu',
                preload: true,
                show: {
                    aniShow: 'pop-in',
                    autoShow: true
                },
                styles: {
                    "render": "always",
                    "popGesture": "hide",
                    "bounce": "vertical",
                    "bounceBackground": "#efeff4",
                    "titleNView": { //详情页原生导航配置
                        backgroundColor: '#fff', //导航栏背景色
                        titleText: item.name, //导航栏标题
                        titleColor: '#000', //文字颜色
                        autoBackButton: true, //自动绘制返回箭头
                        splitLine: { //底部分割线
                            color: '#dfdfdf'
                        }
                    }
                },
                waiting: {
                    autoShow: true
                }
            });
        });
    </script>
</body>

</html>